<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- href="javascript:"
			表示该超链接不发生任何跳转
			上面的情况一般是配合事件来实现其他功能
		-->
		<a href="#" download="../js/jquery-3.5.1.js">下载jquery</a>
		<a id="a1" href="javascript:">不会发生跳转的超链接</a>
		<a id="a2" href="book.html">去到book.html页面</a>
		<a id="a3" href="#" download="data.json"></a>
		<!-- download是指下载的文件名，href为下载的路径 -->
		<a href="#" download=""></a>
		<button type="button">下载</button>
		<!-- 在后台开发，不重页面，只中数据
			数据一般只有几种操作
				数据任何保存
					下载到txt、json等文件
					浏览器中
						sessionStorage
						localStorage
						cookies
					数据库中
					内存中
						数组
						集合：JS只有ES6才支持
						对象
					数据如何显示
						将数组中的数据显示在table标签中
							JQ实现
							JS实现
							JQ的datatable插件
						将数据库中的数据保存在数组中，然后将该数组中的数据显示在table上
					数据如何传递
						html中的JS实现
							sessionStorage
							localStorage
							cookies
						后台实现 -->

		<script type="text/javascript">
			$("#a1").click(function() {
				console.log(1);
			});
			$("#a2").click(function() {
				console.log(2);
			});
			//2.添加一个下载按钮，点击实现将表格中的数据下载到本地，且文件命名为data.json
			let books = [{id: 1,name: '三国演义',tdate: '1899-08-09',price: '60.00',count: 1,account: "hh"},
				{id: 2,name: '水浒传',tdate: '1863-09-10',price: '69.00',count: 1,account: "haha"},
				{id: 3,name: '红楼梦',tdate: '1884-03-12',price: '99.00',count: 1,account: "aa"},
				{id: 4,name: '西游记',tdate: '1900-07-28',price: '9.00',count: 1,account: "aa"}
			];
		</script>
	</body>
</html>
